<template>
  <div class="head">
    <div class="logo"><img class="logo-img" :src="schoolLogo.logo_url"><span class="name">{{ schoolLogo.school_name }}</span></div>
    <h1 class="h1">各班级离校情况</h1>
  </div>
</template>

<script>
import ajaxApi from '@/modules/ajax-api'
export default {
  data () {
    return {
      schoolLogo: {}
    }
  },
  // beforeRouteUpdate (to, from, next) {
  //   if (to.query.reload) {
  //     this.loadData()
  //   }
  //   next()
  // },
  created () {
    this.loadData()
  },
  methods: {
    loadData () {
      ajaxApi.getSchoolLogo(true).then(data => {
        this.schoolLogo = data.data || {}
      })
    }
  }
}
</script>

<style scoped>
.head {
  height: 0.8em;
  background-color: #5680df;
  box-shadow: 0 0.02em 0.1em 0 rgba(34, 23, 20, 0.15);
  position: relative;
}
.logo {
  position: absolute;
  left: 0.47em;
  top: 0.1em;
  font-size: 0.38em;
  line-height: 1.7;
}
.logo-img {
  vertical-align: middle;
  width: 0.59em;
  height: 0.59em;
  /* font-size: 1em; */
  font-size: 2.7em;
}
.name {
  /* font-size: 0.38em; */
  letter-spacing: 0.03em;
  color: #ffffff;
  margin-left: 0.32em;
  vertical-align: -0.08em;
  /* float: left; */
}
.h1 {
  font-size: 0.38em;
  letter-spacing: 0.03em;
  color: #ffffff;
  text-align: center;
  line-height: 2;
}
</style>
